<template lang="pug">
  el-drawer.commonDrawer(
    title="检查项目信息"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="840px"
    @close="$_handleCancel"
  )
    .drawer-content
      el-row(:gutter="20")
        el-col(:span="16")
          form-box(
            ref="filterForm"
            :fields="seachConfig"
            :isFilter="true"
            :submitting="loading"
            :submitHandle="val => getData(val)"
          )
        el-col.tr(:span="8")
          el-button.gradientVertical(size="large" round @click="addHandle({}, 'add')") 添加
      s-table(
        ref="table"
        rowKey="id"
        :column="column"
        :pagination="null"
        v-loading="loading"
        :dataPops="list"
      )
        template(slot="action" slot-scope="text, scope")
          el-link(:underline="false" type="primary" @click="addHandle(scope, 'edit')") 编辑
          el-popconfirm(
            title="请确认是否删除"
            @confirm="() => stopProject(scope.id)"
            @onConfirm="() => stopProject(scope.id)"
          )
            el-link(:underline="false" type="primary" slot="reference") 删除
      modal-form(
        :visible.sync="addVisible"
        title="项目"
        :fields="addField"
        :submitHandle="addSubmit"
        :submitting="addSubmitting"
        :layoutCol="{ sm: 24, md: 24, lg: 24 }"
      )
</template>
<script>
import { proList, proParent, proSubmit, proUpdate, stopProject } from '../api'

const column = [
  {
    prop: 'sort',
    label: '序号'
  },
  {
    prop: 'sortName',
    label: '项目名称',
    width: 400
  },
  {
    prop: 'parentName',
    label: '上级'
  },
  {
    prop: 'action',
    label: '操作'
  }
]

const seachConfig = [
  {
    key: 'sortName',
    label: '项目名称'
  }
]

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    },
    typeInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: false,
      column,
      seachConfig,
      list: [],
      parentList: [],
      addSubmitting: false,
      addVisible: false,
      addVisibleType: 'add',
      chosedRow: {}
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    addField () {
      const { typeInfo, chosedRow } = this
      return [
        {
          key: 'typeName',
          label: '检查类别',
          type: 'text',
          initialValue: typeInfo.typeName
        },
        {
          key: 'conclusionType',
          label: '结论类别',
          type: 'text',
          initialValue: typeInfo.conclusionType
        },
        {
          key: 'parentId',
          label: '上级',
          type: 'select',
          initialValue: chosedRow.parentId,
          rules: [{ required: true, message: '请选择' }],
          fieldProps: {
            options: this.parentList,
            props: { value: 'id', label: 'sortName' }
          }
        },
        {
          key: 'sortName',
          label: '项目名称',
          rules: [{ required: true, message: '请选择' }],
          initialValue: chosedRow.sortName
        }
        // {
        //   key: 'sortValueLow',
        //   label: '最低分',
        //   type: 'number',
        //   rules: [{ required: chosedRow.parentId !== '0', message: '请选择' }],
        //   initialValue: chosedRow.sortValueLow
        // },
        // {
        //   key: 'sortValue',
        //   label: '最高分',
        //   type: 'number',
        //   rules: [{ required: chosedRow.parentId !== '0', message: '请选择' }],
        //   initialValue: chosedRow.sortValue
        // }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val && this.id) {
        this.getData()
      }
    }
  },
  created () {

  },
  methods: {
    getData (val = {}) {
      this.list = []
      this.loaging = true
      proList({ targetId: this.id, ...val }).then(res => {
        this.list = res || []
      }).finally(() => {
        this.loaging = false
      })
      this.getProParent()
    },
    getProParent () {
      proParent({ targetId: this.id }).then(res => {
        console.log(res)
        this.parentList = res.parentList || []
        this.parentList.push({
          id: '0',
          sortName: '第一级'
        })
      })
    },
    addHandle (row = {}, type = 'add') {
      console.log(row)
      this.chosedRow = row
      this.addVisibleType = type
      this.addVisible = true
    },
    addSubmit (values) {
      values.targetId = this.id
      console.log(values)
      this.submitting = true
      if (this.addVisibleType === 'add') {
        proSubmit(values).then(() => {
          this.$message.success('提交成功')
          this.getData()
          this.addVisible = false
        }).finally(() => {
          this.submitting = false
        })
      } else {
        values.projectId = this.chosedRow.id
        proUpdate(values).then(() => {
          this.$message.success('提交成功')
          this.getData()
          this.addVisible = false
        }).finally(() => {
          this.submitting = false
        })
      }
    },
    stopProject (id) {
      stopProject({ projectId: id }).then(res => {
        this.getData()
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-content{
  h3 {
    font-size: 17px;
    margin-top: 30px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  ::v-deep{
    .tableWrapper{
      padding: 0
    }
  }
}
</style>
